<template>
    <div class="data">
      <!-- 头部 -->
			<div class="dataHeader">
				<div class="audit_search">
					<div class="block">
            <el-input v-model="bankNo" inputPattern="/^1(3[0-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/" placeholder="请输入账号"></el-input>
          </div>
					<div class="block">
            <el-input v-model="mobile" placeholder="请输入手机号"></el-input>
          </div>
					<div class="block">
						<!-- <span class="demonstration"></span> -->
						<el-date-picker v-model="applyDate"	type="date" placeholder="选择日期">
						</el-date-picker>
              <el-button class="seachBtn" @click="queryTow(bankNo,mobile,applyDate)" type="primary">搜索</el-button>
					</div>
				</div>
			</div>
      
      <!-- 内容 -->
      <div class="dataContent">
        <el-table  :data="withdrawalList" border style="width: 100%">
          <el-table-column fixed prop=""  label="类型" width="70">
             <template slot-scope="scope">
						    <span v-if="scope.row.accountType == 1">个人</span>
						    <span v-if="scope.row.accountType == 2">企业</span>
             </template>
          </el-table-column>
          <el-table-column fixed prop="bankName" label="银行名称" width="">
          </el-table-column>
          <el-table-column fixed prop="bankSubName" label="支行名称" width="140">
          </el-table-column>
          <el-table-column fixed prop="companyName" label="名称" width="">
          </el-table-column>
          <el-table-column fixed prop="bankNo" label="账号" width="">
          </el-table-column>
          <el-table-column fixed prop="applyMoney" label="提现金额" width="120">
          </el-table-column>
          <el-table-column fixed prop="applyTime" label="申请时间" width="120">
          </el-table-column>
          <el-table-column fixed prop="info" label="备注" width="">
          </el-table-column>
          <el-table-column fixed prop="" label="状态" width="">
            <template slot-scope="scope">
						  <span v-if="scope.row.status == 0" >已撤销</span>
						  <span v-if="scope.row.status == 1" >申请</span>
						  <span v-if="scope.row.status == 2" >已审核通过</span>
						  <span v-if="scope.row.status == 3" >已确认通过</span>
             </template>
          </el-table-column>
            <el-table-column fixed prop="" label="操作" width="180">
            <template slot-scope="scope">
						  <el-button v-if="scope.row.status == 0"  type="text">暂无操作 </el-button>
						  <el-button v-if="scope.row.status == 1"  type="text">
                <span @click="withdrawalOperation(scope.row,1)">审核通过</span>
                <span @click="withdrawalOperation(scope.row,0)">撤销申请</span>
              </el-button>
						  <el-button v-if="scope.row.status == 2" @click="confirmWithdrawal(scope.row,1)" type="text">确认通过</el-button>
						  <el-button v-if="scope.row.status == 3"  type="text">暂无操作</el-button>
             </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination 
        @current-change="handleCurrentChange" 
        :current-page.sync="currentPage" 
        :page-size="10" 
        layout="total, prev, pager, next" :total="this.total">
        </el-pagination>
      </div>

    </div>
</template>

<script>
import http_url from "@/http/http";
export default {
  data() {
    return {
      withdrawalList: [],
      page: 1,
      rows: 10,
      mobile: "",
      applyDate: "",
      bankNo: "",
      total: 0,
      currentPage: 1
    };
  },
  mounted() {
    this.withdrawal();
  },
  methods: {
    copyClick(row, type) {
      console.log(row);
      console.log(type);
    },
    //提现列表初始化
    withdrawal() {
      this.$http({
        method: "POST",
        url: http_url.BASE_URL + "/withdrawal/pagelist.do",
        data: `page=${this.page}&rows=${this.rows}&mobile=${
          this.mobile
        }&applyDate=${this.applyDate}&bankNo=${this.bankNo}`
      }).then(res => {
        console.log(res.data.data.list);
        if (res.data.code == 0) {
          this.withdrawalList = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },
    //提现操作 1审核通过 0撤销申请
    withdrawalOperation(row, type) {
      console.log(row.id);
      console.log(type);

      this.$prompt("请输入备注信息", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          this.$http({
            method: "POST",
            url: http_url.BASE_URL + "/withdrawal/checkWithdrawal.do",
            data: `id=${row.id}&auditType=${type}&auditInfo=${value}`
          })
            .then(res => {
              console.log(res);
              this.withdrawal();
              this.$message({
                type: "success",
                message: res.data.message
              });
            })
            .catch(error => {
              this.$message({
                message: " 网络错误，请稍后再试！",
                type: "warning"
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消备注信息"
          });
        });
    },
    // 提现确认操作
    confirmWithdrawal(row, type) {
      this.$prompt("请输入备注信息", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(({ value }) => {
        this.$http({
          method: "POST",
          url: http_url.BASE_URL + "/withdrawal/confirmWithdrawal.do",
          data: `id=${row.id}&auditType=${type}&auditInfo=${value}`
        })
          .then(res => {
            this.withdrawal();
            this.$message({
              type: "success",
              message: res.data.message
            }).catch(error => {
              this.$message({
                message: " 网络错误，请稍后再试！",
                type: "warning"
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消提现确认操作"
            });
          });
      });
    },
    //账户或者手机号查询
    queryTow(bankNo, mobile, applyDate) {
      console.log(bankNo);
      console.log(mobile);
      console.log(applyDate);
      // this.getTaskTime("applyDate");
      this.bankNo = bankNo;
      this.mobile = mobile;
      this.applyDate = http_url.getTaskTime(applyDate);
      this.withdrawal();
    },
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.withdrawal();
    }
  }
};
</script>

<style lang="scss" scoped>
.data {
  width: 100%;
  height: calc(100% - 50px);
  padding: 10px;
  .dataHeader {
    height: 40px;
    width: 100%;
    margin-top: 5px;
    position: relative;
    margin-bottom: 20px;
    .audit_search {
      // background: darkcyan;
      width: 710px;
      height: 100%;
      .seachBtn {
        position: absolute;
        left: 650px;
        display: block;
        width: 60px;
        height: 36px;
      }
    }
    .audit_search .block {
      width: 190px;
      display: inline-block;
    }
    .block input {
      width: 100%;
    }
    // input {
    //   width: 270px;
    // }
    button {
      position: absolute;
      right: 100px;
      top: 0;
    }
  }
  .dataContent {
    height: calc(100% - 150px);
    overflow-y: scroll;
    th,
    td {
      text-align: center;
    }
    td {
      font-size: 14px;
    }
  }
  .pagination {
    position: absolute;
    bottom: 50px;
    left: calc(50% - 145px);
    text-align: center;
  }
}
</style>
